<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>积分兑换商城首页触屏版html5</title>
    <link rel="stylesheet" type="text/css" href="/css/base.css"/>
    <link rel="stylesheet" type="text/css" href="/css/shopindex.css"/>
    <link rel="stylesheet" type="text/css" href="/css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="/css/loaders.min.css"/>
    <link rel="stylesheet" type="text/css" href="/css/loading.css"/>
    <link rel="stylesheet" href="/css/swiper.min.css">
    <script src="/js/rem.js"></script>
    <script src="/js/jquery.min.js" type="text/javascript"></script>
	<script src="/js/plugins/jrender/jrender.js"></script>
    <script src="/js/others.js"></script>
	<script src="/js/common.js"></script>
	<script src="/js/swiper.jquery.min.js"></script>

	<script type="text/javascript">
		$(window).load(function(){
			$(".loading").addClass("loader-chanage")
			$(".loading").fadeOut(300)
		})

		$(function () {
			//发get请求查最新添加的商品
			$.get("/products",function (data) {
                //console.log(data);
                $(".newProduct").renderValues({list:data},{
                    handle: function (ele, value) {
                        //动态渲染a标签
                        $(ele).attr("href", "/mine/shopping/detail.html?id="+value);
                    }
				});
            })


			//根据发请求查该分类所有数据
			$.get("/products/qo",{"productTypeId":1,"state":1},function (data) {
				console.log(data);

				$(".type1").renderValues(data,{

					handle: function (ele, value) {
						//动态渲染a标签
						$(ele).attr("href", "/mine/shopping/detail.html?id="+value);
					}
				});
			})
			$.get("/products/qo",{"productTypeId":2,"state":1},function (data) {
				console.log(data);

				$(".type2").renderValues(data,{

					handle: function (ele, value) {
						//动态渲染a标签
						$(ele).attr("href", "/mine/shopping/detail.html?id="+value);
					}
				});
			})
			$.get("/products/qo",{"productTypeId":4,"state":1},function (data) {
				console.log(data);

				$(".type3").renderValues(data,{

					handle: function (ele, value) {
						//动态渲染a标签
						$(ele).attr("href", "/mine/shopping/detail.html?id="+value);
					}
				});
			})
			$.get("/products/qo",{"productTypeId":6,"state":1},function (data) {
				console.log(data);

				$(".type4").renderValues(data,{

					handle: function (ele, value) {
						//动态渲染a标签
						$(ele).attr("href", "/mine/shopping/detail.html?id="+value);
					}
				});
			})
        })

	</script>
</head>
<!--loading页开始-->
<div class="loading">
	<div class="loader">
        <div class="loader-inner pacman">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
	</div>
</div>
<!--loading页结束-->
	<body>		
		<!--头部区域-->
	    <header class="mui-bar mui-bar-nav" style="background-color: #4D4C4B" id="header">
			<a class="btn" href="/mine/profiles.html">
				<i class="iconfont icon-fanhui"></i>
			</a>
	        <h4>积分商城</h4>
	    </header>
		<div id="main" class="clearfloat warp">			
		    <div class="mui-content">
				<!--banner开始-->
				<div class="banner swiper-container">
		            <div class="swiper-wrapper">
		                <div class="swiper-slide"><a href="javascript:void(0)"><img class="swiper-lazy" data src="/images/banner4.jpg" alt=""></a></div>
		                <div class="swiper-slide"><a href="javascript:void(0)"><img class="swiper-lazy" data src="/images/banner1.jpg" alt=""></a></div>
		                <div class="swiper-slide"><a href="javascript:void(0)"><img class="swiper-lazy" data src="/images/banner3.jpg" alt=""></a></div>
		            </div>
		        </div>
		        <!--第一栏分类开始-->
		        <div class="cation clearfloat box-s">
		        	<ul>
		        		<li>
		        			<a href="#">
		        				<img src="/images/ico5.png"/>
		        				<p>新品专区</p>
		        			</a>
		        		</li>
		        		<li>
		        			<a href="#">
		        				<img src="/images/ico2.png"/>
		        				<p>送礼首选</p>
		        			</a>
		        		</li>
		        		<li>
		        			<a href="#">
		        				<img src="/images/ico3.png"/>
		        				<p>积分获取</p>
		        			</a>
		        		</li>
		        		<li>
		        			<a href="#">
		        				<img src="/images/ico4.png"/>
		        				<p>私人定制</p>
		        			</a>
		        		</li>
		        	</ul>
		        </div>
		        <!--第一栏分类结束-->
		        
		      
		        <!--新品专区-->
		        <div class="onnew clearfloat">
		        	<div class="boutit clearfloat">
		        		<span></span>
		        		<samp>新品专区</samp>
		        	</div>
		        	<div class="content clearfloat newProduct">
		        		<div class="top clearfloat" render-loop="list">
							<a href="detail.html" render-key="list.id" render-fun="handle">
		        			<div class="list clearfloat fl box-s">
			        				<div class="zuo clearfloat fl box-s">
			        					<p class="tit text" render-html="list.productName"></p>
				        				<p><span>积分:</span><span class="over db red" render-html="list.price"></span></p>
			        				</div>
			        				<div class="tu clearfloat fr">
			        					<span></span>
			        					<img render-src="list.productImg"/>
			        				</div>
		        			</div>
							</a>

		        		</div>
		        	</div>
		        </div>
		        
		        <!--1F视频会员-->
		        <div class="theme clearfloat type1">
		        	<div class="boutit clearfloat">
		        		<span></span>
		        		<samp>1F视频会员</samp>
		        	</div>

					<div class="content clearfloat" render-loop="list">


						<div class="list clearfloat fl">
							<a href="detail.html" render-key="list.id" render-fun="handle">
								<div class="tu clearfloat fr">
									<span></span>
									<img render-src="list.productImg" />
								</div>
								<div class="shang clearfloat fl box-s">
									<p class="tit over" render-html="list.productName"></p>
									<p><span>积分:</span><span class="over db red" render-html="list.price"></span></p>
								</div>
							</a>
						</div>
					</div>
		        </div>


		        <!--2F话费/流量-->
		        <div class="theme clearfloat type2 ">
		        	<div class="boutit clearfloat">
		        		<span></span>
		        		<samp>2F话费/流量</samp>
		        	</div>
					<div class="content clearfloat" render-loop="list">


						<div class="list clearfloat fl">
							<a href="detail.html" render-key="list.id" render-fun="handle">
								<div class="tu clearfloat fr">
									<span></span>
									<img render-src="list.productImg" />
								</div>
								<div class="shang clearfloat fl box-s">
									<p class="tit over" render-html="list.productName"></p>
									<p><span>积分:</span><span class="over db red" render-html="list.price"></span></p>
								</div>
							</a>
						</div>
					</div>
		        </div>
		        <!--3F购物券-->
		        <div class="theme clearfloat type3">
		        	<div class="boutit clearfloat">
		        		<span></span>
		        		<samp>3F购物券</samp>
		        	</div>
					<div class="content clearfloat" render-loop="list">


						<div class="list clearfloat fl">
							<a href="detail.html" render-key="list.id" render-fun="handle">
								<div class="tu clearfloat fr">
									<span></span>
									<img render-src="list.productImg" />
								</div>
								<div class="shang clearfloat fl box-s">
									<p class="tit over" render-html="list.productName"></p>
									<p><span>积分:</span><span class="over db red" render-html="list.price"></span></p>
								</div>
							</a>
						</div>
					</div>
		        </div>
		        <!--4F手机、数码配件-->
		        <div class="theme clearfloat type4">
		        	<div class="boutit clearfloat">
		        		<span></span>
		        		<samp>4F手机、数码配件</samp>
		        	</div>
					<div class="content clearfloat" render-loop="list">


						<div class="list clearfloat fl">
							<a href="detail.html" render-key="list.id" render-fun="handle">
								<div class="tu clearfloat fr">
									<span></span>
									<img render-src="list.productImg" />
								</div>
								<div class="shang clearfloat fl box-s">
									<p class="tit over" render-html="list.productName"></p>
									<p><span>积分:</span><span class="over db red" render-html="list.price"></span></p>
								</div>
							</a>
						</div>
					</div>
		        </div>
	        </div>
		</div>
		<!--footer star-->
		<footer class="page-footer fixed-footer" id="footer">
			<ul>
				<li class="active">
					<a href="shopindex.html">
						<i class="iconfont icon-shouye"></i>
						<p>首页</p>
					</a>
				</li>
				<li>
					<a href="cation.html">
						<i class="iconfont icon-icon04"></i>
						<p>分类</p>
					</a>
				</li>
				<li>
					<a href="shopcar.html">
						<i class="iconfont icon-gouwuche"></i>
						<p>购物车</p>
					</a>
				</li>
				<li>
					<a href="center.html">
						<i class="iconfont icon-yonghuming"></i>
						<p>我的</p>
					</a>
				</li>
			</ul>
		</footer>
		<!--footer end-->
	</body>

</html>